<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="1200px" @close="onCancel">
			<el-form ref="formRef" :model="state.queryParams" disabled>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="商品ID" prop="goods_id">
							<el-input v-model="state.queryParams.goods_id" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="商品名称" prop="title">
							<el-input v-model="state.queryParams.title" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<el-table :data="state.tableList" v-loading="state.loading" border>
				<el-table-column label="规格ID" align="center" prop="id" />
				<el-table-column label="规格名称" align="center">
					<template #default="{ row }">
						{{ row.skus.map((item: any) => item.k).join('_') }}
					</template>
				</el-table-column>
				<el-table-column label="规格值" align="center">
					<template #default="{ row }">
						{{ row.skus.map((item: any) => item.v).join('_') }}
					</template>
				</el-table-column>
				<el-table-column label="图片" align="center">
					<template #default="{ row }">
						<el-avatar :src="row.icon" shape="square" />
					</template>
				</el-table-column>
				<el-table-column label="原价" align="center" prop="original_price" />
				<el-table-column label="成本价" align="center" prop="cost_price" />
				<el-table-column label="平台服务费" align="center" prop="service_price" />
				<el-table-column label="铜牌佣金" align="center" prop="bronze_commission" />
				<el-table-column label="银牌佣金" align="center" prop="silver_commission" />
				<el-table-column label="金牌佣金" align="center" prop="gold_commission" />
				<el-table-column label="总库存" align="center" prop="stock" />
				<el-table-column label="售价" align="center" prop="price">
					<template #header>
						售价
						<el-tooltip effect="dark" content="售价 = 成本价 + 平台服务费 + 铜牌佣金 + 银牌佣金 + 金牌佣金" placement="top">
							<el-icon>
								<ele-InfoFilled />
							</el-icon>
						</el-tooltip>
					</template>
				</el-table-column>
				<!-- <el-table-column label="剩余库存" align="center" prop="stock_sy" />
				<el-table-column label="真实销量" align="center" prop="real_sales" :formatter="formatterRealSales" /> -->
				<el-table-column v-if="state.dialog.type === 'edit'" label="操作" align="center" prop="operation" fixed="right">
					<template #default="{ row }">
						<el-button type="primary" link @click="onEditStock(row)">修改库存</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<EditStockDialog ref="editStockDialogRef" />
	</div>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, reactive, ref } from 'vue';
import { goodsApi } from '/@/api/supplier';
import { floatSub } from '/@/utils/dictionary';

const EditStockDialog = defineAsyncComponent(() => import('./editStockDialog.vue'));

const GoodsApi = goodsApi();
let callback: Function = () => {};
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	},
	queryParams: {
		goods_id: '',
		title: '',
	},
	tableList: [],
	loading: false,
});
const editStockDialogRef = ref();

/********** 触发事件 **********/
// 取消
const onCancel = () => {
	state.dialog.type === 'edit' && callback();
};
// 修改库存
const onEditStock = (row: any) => {
	editStockDialogRef.value.openDialog(
		{ ...state.queryParams, option_id: row.id, stock: row.stock, stock_number: '', type: 1, real_sales: formatterRealSales(row) },
		() => getList()
	);
};

/********** 方法事件 **********/
// 打开
const openDialog = (data: any, row: any, fn: Function) => {
	state.dialog = {
		isShowDialog: true,
		type: data.type,
		title: data.title,
		submitLoading: false,
	};
	callback = fn;
	state.queryParams.goods_id = row.id;
	state.queryParams.title = row.title;
	state.tableList = [];
	getList();
};
// 刷新列表
const getList = () => {
	state.loading = true;
	_goodsSelectSku(state.queryParams);
};
// 真实销量字典
const formatterRealSales = (row: any) => {
	return floatSub(row.stock, row.stock_sy);
};

/********** 网络请求 **********/
// 查询商品详情  sku
const _goodsSelectSku = (params: Object) => {
	GoodsApi.goodsSelectSku(params)
		.then((res) => {
			state.tableList = res.data.info.specifications_val;
			state.loading = false;
		})
		.catch(() => (state.loading = false));
};

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
